<template>
 <div class="classify">
  <div class="top">
  	<!-- 头部 -->
   <div class="classify-heard bg-white d-flex jc-between">
   	<!-- 左侧返回 -->
     <div> 
      <el-button type="text" @click="$router.go(-1)">
       <div class="iconfont icon-back ml-3 fs-xxxl text-dark"></div>
     </el-button>
   </div>
   <!-- 中间搜索框 -->
   <div>
    <div class="search-input d-flex jc-between ai-center mr-3 my-1 pl-3 ml-3">
     <i class="mintui mintui-search fs-xxl"></i>
     <input ref="classify" class="py-1" type="text" v-model="searchKey" />
   </div>
 </div>
 <!-- 搜索按钮 -->
 <div>
  <el-button class="px-3 text-dark fs-xxl" type="text" @click="getAllProduct()">搜索</el-button>
</div>
</div>
<!-- 分类条 -->
<div class="px-2 bg-white py-3" style="touch-action: none;">
 <swiper :options="swiperOption">
   <swiper-slide v-for="(item,i) in classifyList.menu" :key="i">
    <div @click="getIndex(i)">
     <div @click="getClassifyProduct(item.name)" style="word-break: keep-all;" :class="{active : active === i}" class="py-3 fs-xl px-3">
       {{item.name}}
     </div>
   </div>
 </swiper-slide>	
</swiper>
</div>
</div>


<!-- 产品列表-->
<div class="classify_contain">
  <!-- <vuescroll
  class="scroll"
  ref="vs"
  :refreshStart='refreshStart'
  :loadStart='loadStart'
  :noData='noData'
  > -->
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
  <van-list
  offset="50"
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  

  <div @click="$router.push('/productDetail/'+item.id)" class="classify_contain_item bg-white d-flex" v-for="(item,i) in productList">
   <!-- 左侧图片 -->
   <div class="img">
    <img
    style="width: 150px; height: 130px;background-color: #6d6e6a"
    v-lazy="item.image"
    fit="cover">
  </img>
</div>
<!-- 右侧文字 -->
<div class="px-1 py-2">
  <div class="d-flex"><div class="promise text-white bg-primary px-1" style="word-break: keep-all;">质量保证</div><div class="fs-xl pl-2">{{item.name}}</div></div>
  <div class="py-2 text-grey">{{item.introduction}}</div>
  <div class="d-flex"><div class="fs-xl text-pink pr-3">￥{{item.price/ num}}</div> <div class="text-grey">月售{{item.saleNum}}件</div></div>
  <div class="py-3 text-grey">{{item.businessMode}}</div>
</div>
</div>
<!-- </vuescroll> -->
</van-list>
</van-pull-refresh>
<!-- 没有相关商品 -->
<div v-if="productList.length == 0" class="bg-white text-c" style="height: 150px; padding-top: 100px;">
  <div>
    <img style="width: 150px;" src="https://img.ddky.com/c/wap/images/ddky2/onthing.png">
  </div>
  <div class="none text-grey pt-3 py-3">未找到相关商品哦~！</div>
</div>
</div>
<navFooter></navFooter>
</div>

</template>

<script>
  import navFooter from "../../components/public/navFooter";
  import { Toast } from 'mint-ui'
  import vuescroll from '../../components/public/vue-scroll'
  // import vuescroll from 'vuescroll';
  export default {
    data(){
     return {
      name: '',
       num:100,
       searchKey: "",
       classifyList: {},
       swiperOption: {
         slidesPerView: 4,
       },
       active: 0,
       productList: [],
       pageindex: 1,
       
       noData:false, //判断是否数据全部加载完成 true为全部加载完 vuescroll

       loading: false,
       finished: false,
       refreshing: false,
      }
    },
    //监听actic 是否改变 改变则把当前页为1
    watch: {
        'active': function(newVal){
              if (newVal) {
                this.pageindex = 1;
              }
          },
        
    },
    props: ['keyWord'],
    components: {
      vuescroll,
      navFooter
    },
    methods: {
      getIndex(i){
          this.pageindex = 1; //初始当前页
          this.productList = [];
          this.active = i
        },
    async getClassifyList(){
      this.$store.commit('showLoading')
     const res = await this.$http.get(`category/findAllCategory.do`)
     if (res.data.code != 0) {
      this.$store.commit('hideLoading')
      this.classifyList = res.data[0]
      this.classifyList.menu.unshift({name: this.classifyList.name})
    }else {
      this.$store.commit('hideLoading')
      Toast('服务器异常！')
    }



  },
  async getAllProduct(){
        
    if (this.searchKey) {
          
          //请求
          const res = await this.$http.get(`search.do?page=${1}&size=${1000}&keyword=${this.searchKey}`)
          this.productList = res.data.rows;
          this.active = 0
          if (res.data.rows == '[]' || res.data.rows == null || res.data.rows == '') {
               this.loading = false;
               this.finished = true;
            }else {
               
          }
        }
        else{

          const res = await this.$http.get(`search.do?page=${this.pageindex}&size=${8}`)
          if (res.data.code != 0) {
            this.productList = this.productList.concat(res.data.rows)
            if (res.data.rows == '[]' || res.data.rows == null || res.data.rows == '') {
               this.loading = false;
               this.finished = true;
            }else {
              
            }

          }

        }
      },
      async getClassifyProduct(name,i){
        this.pageindex = 1;
        if (name) {
          this.name = name;
        }
        this.productList = [];
        this.searchKey = ''
        if (this.name == '全部') {
          this.getAllProduct();
        }else{
          this.pageindex = 1;
         const res = await this.$http.get(`search.do?page=${this.pageindex}&size=${1000}&category=${name}`)
         this.productList = this.productList.concat(res.data.rows)

            
          
        
      }

    },
    //vant
    onLoad() {

      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        
        if (this.active == 0) {
           this.pageindex ++
           this.getAllProduct()
           this.loading = false
           }
         if (this.searchKey) {
           
         }
        else{
          
         }
      }, 1000);
    },
     onRefresh() {

      // 重新加载数据
      
      this.refreshing  = true
      this.$http.get(`search.do?page=${1}&size=${1000}`).then(res => {
        this.productList = res.data.rows
        this.refreshing  = false
        this.active = 0
      })

    },
  
      //vuescroll
      /*refreshStart(done){
        setTimeout(()=>{
                // 这里写 ajax 业务请求，在数据请求到后执行 done() 关闭动画
                this.$http.get(`search.do?page=${1}&size=${1000}`).then(res => {
                  this.productList = res.data.rows
                })
                
                done() 
              },1600)
              },
        // 加载开始
        loadStart(done){
          setTimeout(()=>{
            
                //通过当前 分类的状态 来判断 请求的是哪一个加载更多接口

                  if (this.active == 0) {
                     this.pageindex ++
                     this.getAllProduct()
                  
                  }
                  if (this.searchKey) {
                    this.noData  = true
                  }
                  else{
                    this.noData  = true
                  }
                  
              
                
                // 这里写 ajax 业务请求，在数据请求到后执行 done() 关闭动画
                done() 
              },1000)
        }*/
      },
      created(){
        this.searchKey = this.keyWord;
        this.getClassifyList();
        this.getAllProduct();

        
      }
    }
  </script>

  <style scoped lang="scss">
  .search-input {
    background-color: #eee;
    border: none;
    border-radius: 80px;
    width: 100%;
    height: 85%;
    overflow: hidden;
    input[type="text"] {
      font-size: 18px;
      border: none;
      width: 90%;
      height: 80%;
      color: #979595;
      background-color: #eee;

    }

  }
  .promise {
    height: 1.45rem;
    font-size: 12px;
    border-radius: 10%;
    line-height: 1.45rem;
  }
  .classify_contain_item {
   border-bottom: 1px solid #eeeeee;
 }
 .scroll {
  // padding-bottom: rem;
      }
 .classify_contain {
     padding-bottom: 50px;

 }
 .classify {
   
 }
 .top {
   position: sticky;
   top: 0;
   z-index: 999;
 }
 .active {
   color: #e32639;
 }
</style>